<template>
  <div class="common-layout">
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号"/>
        <el-table-column prop="name" label="资源名称"/>
        <el-table-column prop="url" label="资源路径"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column prop="createTime" label="添加时间"/>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          background
          v-model:currentPage="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref} from 'vue'
import {getResourceQueryPageApi} from '../../../request/api/resource'

const state = reactive<{
  queryForm: ResourceQueryPageParams,
  tableData: {}[],
  totalCount: number,
  pageSizes: number[],
}>({
  queryForm: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  totalCount: 100,
  pageSizes: [5, 10, 15, 20],
})

const {queryForm, tableData, totalCount, pageSizes} = toRefs(state)


const queryPage = () => {
  getResourceQueryPageApi(queryForm.value).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    }
  })
}

queryPage()

// 修改每页条数
const handleSizeChange = (data: number) => {
  queryForm.value.pageSize = data
  queryPage()
}

// 修改当前页
const handleCurrentChange = (data: number) => {
  queryForm.value.pageNum = data
  queryPage()
}
</script>

<style lang="less" scoped>

</style>
